<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">字段配置：{{ tableName }}</span>
            <el-button
              :loading="genLoading"
              icon="el-icon-s-promotion"
              size="mini"
              style="float: right; padding: 6px 9px"
              type="success"
              @click="toGen"
              >保存&生成</el-button
            >
            <el-button
              :loading="columnLoading"
              icon="el-icon-check"
              size="mini"
              style="float: right; padding: 6px 9px; margin-right: 9px"
              type="primary"
              @click="saveColumnConfig"
              >保存</el-button
            >
            <el-tooltip
              class="item"
              effect="dark"
              content="数据库中表字段变动时使用该功能"
              placement="top-start"
            >
              <el-button
                :loading="syncLoading"
                icon="el-icon-refresh"
                size="mini"
                style="float: right; padding: 6px 9px"
                type="info"
                @click="sync"
                >同步</el-button
              >
            </el-tooltip>
          </div>
          <el-form size="small" label-width="90px">
            <el-table
              v-loading="loading"
              :data="data"
              :max-height="tableHeight"
              size="small"
              style="width: 100%; margin-bottom: 15px"
            >
              <el-table-column prop="columnName" label="字段名称" />
              <el-table-column prop="columnType" label="字段类型" />
              <el-table-column prop="remark" label="字段描述">
                <template slot-scope="scope">
                  <el-input
                    v-model="data[scope.$index].remark"
                    size="mini"
                    class="edit-input"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" label="必填" width="70px">
                <template slot-scope="scope">
                  <el-checkbox v-model="data[scope.$index].notNull" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="列表" width="70px">
                <template slot-scope="scope">
                  <el-checkbox v-model="data[scope.$index].listShow" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="表单" width="70px">
                <template slot-scope="scope">
                  <el-checkbox v-model="data[scope.$index].formShow" />
                </template>
              </el-table-column>
              <el-table-column label="表单类型">
                <template slot-scope="scope">
                  <el-select
                    v-model="data[scope.$index].formType"
                    filterable
                    class="edit-input"
                    clearable
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option label="文本框" value="Input" />
                    <el-option label="文本域" value="Textarea" />
                    <el-option label="单选框" value="Radio" />
                    <el-option label="下拉框" value="Select" />
                    <el-option label="日期框" value="Date" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="查询方式">
                <template slot-scope="scope">
                  <el-select
                    v-model="data[scope.$index].queryType"
                    filterable
                    class="edit-input"
                    clearable
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option label="=" value="=" />
                    <el-option label="!=" value="!=" />
                    <el-option label=">=" value=">=" />
                    <el-option label="<=" value="<=" />
                    <el-option label="Like" value="Like" />
                    <el-option label="NotNull" value="NotNull" />
                    <el-option label="BetWeen" value="BetWeen" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="日期注解">
                <template slot-scope="scope">
                  <el-select
                    v-model="data[scope.$index].dateAnnotation"
                    filterable
                    class="edit-input"
                    clearable
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option label="自动创建时间" value="CreationTimestamp" />
                    <el-option label="自动更新时间" value="UpdateTimestamp" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="关联字典">
                <template slot-scope="scope">
                  <el-select
                    v-model="data[scope.$index].dictName"
                    filterable
                    class="edit-input"
                    clearable
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in dicts"
                      :key="item.id"
                      :label="item.remark === '' ? item.name : item.remark"
                      :value="item.name"
                    />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-card>
      </el-col>
      <el-col>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">生成配置</span>
            <el-button
              :loading="configLoading"
              icon="el-icon-check"
              size="mini"
              style="float: right; padding: 6px 9px"
              type="primary"
              @click="doSubmit"
              >保存</el-button
            >
          </div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            size="small"
            label-width="78px"
          >
            <el-form-item label="作者名称" prop="author">
              <el-input v-model="form.author" style="width: 40%" />
              <span style="color: #c0c0c0; margin-left: 10px"
                >类上面的作者名称</span
              >
            </el-form-item>
            <el-form-item label="模块名称" prop="moduleName">
              <el-input v-model="form.moduleName" style="width: 40%" />
              <span style="color: #c0c0c0; margin-left: 10px"
                >模块的名称，请选择项目中已存在的模块</span
              >
            </el-form-item>
            <el-form-item label="至于包下" prop="pack">
              <el-input v-model="form.pack" style="width: 40%" />
              <span style="color: #c0c0c0; margin-left: 10px"
                >项目包的名称，生成的代码放到哪个包里面</span
              >
            </el-form-item>
            <el-form-item label="接口名称" prop="apiAlias">
              <el-input v-model="form.apiAlias" style="width: 40%" />
              <span style="color: #c0c0c0; margin-left: 10px"
                >接口的名称，用于控制器与接口文档中</span
              >
            </el-form-item>
            <el-form-item label="前端路径" prop="path">
              <el-input v-model="form.path" style="width: 40%" />
              <span style="color: #c0c0c0; margin-left: 10px"
                >输入views文件夹下的目录，不存在即创建</span
              >
            </el-form-item>
            <!--            <el-form-item label="接口目录">-->
            <!--              <el-input v-model="form.apiPath" style="width: 40%" />-->
            <!--              <span style="color: #C0C0C0;margin-left: 10px;">Api存放路径[src/api]，为空则自动生成路径</span>-->
            <!--            </el-form-item>-->
            <el-form-item label="去表前缀" prop="prefix">
              <el-input
                v-model="form.prefix"
                placeholder="默认不去除表前缀"
                style="width: 40%"
              />
              <span style="color: #c0c0c0; margin-left: 10px"
                >默认不去除表前缀，可自定义</span
              >
            </el-form-item>
            <el-form-item label="是否覆盖" prop="cover">
              <el-radio-group
                v-model="form.cover"
                size="mini"
                style="width: 40%"
              >
                <el-radio-button label="true">是</el-radio-button>
                <el-radio-button label="false">否</el-radio-button>
              </el-radio-group>
              <span style="color: #c0c0c0; margin-left: 10px"
                >谨防误操作，请慎重选择</span
              >
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crud from "@/mixins/crud";
import { update, get } from "@/api/generator/genConfig";
import { save, sync, generator } from "@/api/generator/generator";
import { getDicts } from "@/api/system/dict";
export default {
  name: "GeneratorConfig",
  components: {},
  mixins: [crud],
  data() {
    return {
      activeName: "first",
      tableName: "",
      tableHeight: 550,
      columnLoading: false,
      configLoading: false,
      dicts: [],
      syncLoading: false,
      genLoading: false,
      form: {
        id: null,
        tableName: "",
        author: "",
        pack: "",
        path: "",
        moduleName: "",
        cover: "false",
        apiPath: "",
        prefix: "",
        apiAlias: null,
      },
      rules: {
        author: [{ required: true, message: "作者不能为空", trigger: "blur" }],
        pack: [{ required: true, message: "包路径不能为空", trigger: "blur" }],
        moduleName: [
          { required: true, message: "包路径不能为空", trigger: "blur" },
        ],
        path: [
          { required: true, message: "前端路径不能为空", trigger: "blur" },
        ],
        apiAlias: [
          { required: true, message: "接口名称不能为空", trigger: "blur" },
        ],
        cover: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.tableHeight = document.documentElement.clientHeight - 385;
    this.tableName = this.$route.params.tableName;
    this.$nextTick(() => {
      this.init();
      get(this.tableName).then((data) => {
        this.form = data;
        this.form.cover = this.form.cover.toString();
      });
      getDicts().then((data) => {
        this.dicts = data;
      });
    });
  },
  methods: {
    beforeInit() {
      this.url = "api/generator/columns";
      const tableName = this.tableName;
      this.params = { tableName };
      return true;
    },
    saveColumnConfig() {
      this.columnLoading = true;
      save(this.data)
        .then((res) => {
          this.notify("保存成功", "success");
          this.columnLoading = false;
        })
        .catch((err) => {
          this.columnLoading = false;
          console.log(err.response.data.message);
        });
    },
    doSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.configLoading = true;
          update(this.form)
            .then((res) => {
              this.notify("保存成功", "success");
              this.form = res;
              this.form.cover = this.form.cover.toString();
              this.configLoading = false;
            })
            .catch((err) => {
              this.configLoading = false;
              console.log(err.response.data.message);
            });
        }
      });
    },
    sync() {
      this.syncLoading = true;
      sync([this.tableName])
        .then(() => {
          this.init();
          this.notify("同步成功", "success");
          this.syncLoading = false;
        })
        .then(() => {
          this.syncLoading = false;
        });
    },
    toGen() {
      this.genLoading = true;
      save(this.data)
        .then((res) => {
          this.notify("保存成功", "success");
          // 生成代码
          generator(this.tableName, 0)
            .then((data) => {
              this.genLoading = false;
              this.notify("生成成功", "success");
            })
            .catch((err) => {
              this.genLoading = false;
              console.log(err.response.data.message);
            });
        })
        .catch((err) => {
          this.genLoading = false;
          console.log(err.response.data.message);
        });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.edit-input {
  .el-input__inner {
    border: 1px solid #e5e6e7;
  }
}
</style>

<style scoped>
::v-deep .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
